<template>
  <div class="home"><h3>欢迎来到我的主页</h3>

<div class="echart">
 <echarts :option="option" :id="pieid" :mystyle="mystyle"></echarts>

   <pic :option="pic" :id="barid" :mystyle="mystyle"></pic>


</div>
    <div class="lebol">
      <h3><div></div>前端信息：<span>基于vue--element ui </span><b></b></h3>
      <h3><div></div>后台信息：<span>基于PHP thinkphp5框架 </span></h3>
      <h3><div></div>服务器信息：<span>集成服务器环境wampserver</span></h3>
      <h3><div></div>数据库信息：<span>MYSQL数据库</span></h3>
      <h3><div></div>网站内容信息：<span>个人微博网站及知识分享 </span></h3>
      <h3><div></div>个人开发信息：<span>CHIAK--</span></h3>



    </div>

  </div>


</template>

<script>

  import echarts from "./echarts/echarts.vue";
export default {
  data(){
    return{

      barid:"main",
      pieid:"mains",
      mystyle:{
        width:"50%",
        height:"300px",

      },

      pic:{
                  series : [
                      {
                          name: '访问来源',
                          type: 'pie',    // 设置图表类型为饼图
                          radius: '55%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                          data:[          // 数据数组，name 为数据项名称，value 为数据项值
                              {value:235, name:'视频广告'},
                              {value:274, name:'联盟广告'},
                              {value:310, name:'邮件营销'},
                              {value:335, name:'直接访问'},
                              {value:400, name:'搜索引擎'}
                          ]
                      }
                  ]
              },

       option:{
         // color: ['#ff7f50','#87cefa','#da70d6','#32cd32','#6495ed',
         //             '#ff69b4','#ba55d3','#cd5c5c','#ffa500','#40e0d0',
         //             '#1e90ff','#ff6347','#7b68ee','#00fa9a','#ffd700',
         //             '#6699FF','#ff6666','#3cb371','#b8860b','#30e0e0'],
        title: {
          text: "mychiak技术储备",
          textStyle: {
                      fontSize: 18,
                      fontWeight: 'bolder',
                      color: '#30e0e0'          // 主标题文字颜色
                  },
          left: 'center',

        },

        tooltip: {
           trigger: 'item',
            formatter:'{c}%'
        },
        // legend: {
        //   data: ["技术掌握（%）"]
        // },
        xAxis: {
          data: ["JavaScript" , "jQuery", "Bootstrap", "Css3", "Vue", "Ajax"]
        },
        yAxis:  [

                    {
                       show: false,
                        type: 'value',
                        axisLabel: {
                            formatter: '{value} %'
                            },
                    }
                ],
        series: [
          {
            name: "技术掌握（%）",
            type: "bar",

           itemStyle: {
                 normal: {
                    color: function(params) {                         // build a color map as your need.
                        var colorList = [
                          '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',                           '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                          '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
                        ];
                         return colorList[params.dataIndex]
                    },
                     label: {
                        show: true,
                        position: 'top',
                         formatter: '{b}\n{c}%'　　　　//这是关键，在需要的地方加上就行了
                    }
                }
},

            data: [80, 90, 70, 82, 93, 80]
          }
        ]
      }

    }
  },
  components:{
    //echarts组件接入
     echarts,
     'pic':echarts,
  },
  created(){
    //查看创建后的$vuecookies
          //console.log( this.$vuecookies);
          //console.log( this.$store);
        
  
      },
 
  methods:{
    //退出登陆及清楚token
    qc(){
      localStorage.removeItem("token");

    },
  }

}


</script>

<style scoped>
  .home img{
    width: 100%;

  }
  .echart{
    overflow: hidden;
    display: flex;
  }
  h3{
    display: flex;
    text-align: center;

  }
  .home .lebol h3 div{

    width: 0px;
    height: 0px;
    border-left: 10px  red solid;
    border-top: 10px  white solid;
    border-bottom: 10px  white solid;
    border-right: 10px  white solid;
  }



</style>
